<template>
  <div>
    

    <van-index-bar :index-list="indexList">
      <van-index-anchor index="定位" />
      <van-cell v-for="(i,index) in cit" :key="index+100000" :title="i" @click="toCity(i)"/>
      <van-index-anchor index="最近" />
      <van-cell title="广州" />
      <van-cell title="北京" />
      <van-cell title="上海" />
      <van-index-anchor index="热门" />
      <van-cell v-for="(city,index) in parsedHot" :title="city.nm" :key="index+10000" @click="toCity(city.nm)"/>

      <template v-for="item in parsedCities">
        <van-index-anchor :key="item.letter" :index="item.letter" />
        <van-cell v-for="city in item.cities" :key="city.id" :title="city.nm" @click="toCity(city.nm)"/>
      </template>
    </van-index-bar>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      hot: [],
      cts: [],
      cit:["广州"],
      test: [
        {
          letter: "A",
          cities: [
            {
              id: 111,
              nm: "阿拉善盟",
              py: "alashanmeng",
            },
            {
              id: 222,
              nm: "鞍山",
              py: "anshan",
            },
          ],
        },
        {
          letter: "B",
          cities: [
            {
              id: 1,
              nm: "北京",
              py: "beijing",
            },
            {
              id: 23,
              nm: "保定",
              py: "baoding",
            },
          ],
        },
      ],
    };
  },
   methods:{
        toCity(id) {
          console.log(id);
            this.$router.push("/movie/"+id );
        }
    },

  computed: {
    parsedCities: function () {
      var obj = {};

      this.cts.forEach((element) => {
        var letter = element.py.slice(0, 1).toUpperCase();
        // console.log(letter);
        if (obj[letter]) {
          // 存在
          obj[letter] = [...obj[letter], element];
        } else {
          // 不存在
          obj[letter] = [element];
        }
      });

      var arr = [];
      for (var key in obj) {
        arr.push({
          letter: key,
          cities: obj[key],
        });
      }
      var newArr = arr.sort(function (a, b) {
        return a.letter.charCodeAt(0) - b.letter.charCodeAt(0);
      });

      // 需要按照 数组里面的每一项 对象的 某个属性

      return newArr;
    },

    indexList: function () {
      return [
        "定位",
        "最近",
        "热门",
        ...this.parsedCities.map((o) => o.letter),
      ];
    },
    parsedHot: function () {
      return this.hot.map((element) => this.cts.find((o) => o.nm === element));
    },
  },
  created: function () {
    this.axios
      .get("https://apis.netstart.cn/maoyan/cities.json")
      .then((res) => {
        // console.log(res);
        this.hot = res.data.hot;
        this.cts = res.data.cts;
      });
    navigator.geolocation.getCurrentPosition((position) => {
      console.log("获取到位置", position.coords, this);
      // `${position.coords.longitude},${position.coords.latitude}`;
      this.axios
        .get(
          `https://apis.netstart.cn/maoyan/city/latlng?lat=${position.coords.latitude}&lng=${position.coords.longitude}`
        )
        .then((res) => {
          console.log("根据定位获取到城市信息", res.data);
          this.cit = res.data.city;
        });
    });
  },
};
</script>

<style>
</style>